<template>
  <div class="select-seat-seat-view-container">
    <movable-area
      :scale-area="true"
      class="defaultArea"
      :style="{
        height: `${options.seatArea}px`,
        width: `${options.screenWidth}px`,
      }"
    >
      <div class="hallName" v-if="options.hallName && options.cinemaName">
        <div class="txt">{{ options.hallName }}</div>
      </div>

      <movable-view
        :inertia="true"
        v-if="
          options.seatArea && options.screenWidth && options.seatScaleHeight
        "
        class="movableOne"
        :style="{
          height: `${options.seatArea}px`,
          width: `${options.screenWidth}px`,
        }"
        :scale="true"
        direction="all"
        :x="options.x"
        :y="options.y"
        :scaleMax="2"
        :scaleMin="1"
        @change="onMove"
        @scale="onScale"
        :out-of-bounds="false"
      >
        <div
          class="left-column"
          v-if="isShow"
          :style="{
            left: `${10 - moveX / scale}px`,
            top: '100rpx',
            width: '20rpx',
            height: `${options.seatScaleHeight * options.maxY}px`,
            'pointer-events': 'none',
            'z-index': 10,
          }"
        >
          <div
            class="column-item"
            v-for="(item, index) in formatColumn(options.seatToolArr)"
            :key="index"
            :style="{
              height: `${options.seatScaleHeight}px`,
            }"
          >
            {{ item }}
          </div>
          <div style="height: 20rpx"></div>
        </div>
        <div
          class="seatArea"
          :style="{
            width: `${options.seatScaleHeight * options.maxX}px`,
            height: `${options.seatScaleHeight * options.maxY}px`,
          }"
        >
          <!--中轴线  -->

          <div class="alignLine"></div>
          <div
            v-for="(item, index) in options.seatList"
            :key="index"
            class="seatTap"
            :data-index="index"
            @click="clickSeat(item, index)"
            :style="{
              left: `${(item.gCol - 2) * options.seatScaleHeight}px`,
              top: `${(item.gRow - 1) * options.seatScaleHeight}px`,
              width: `${options.seatScaleHeight}px`,
              height: `${options.seatScaleHeight}px`,
            }"
          >
            <image :src="formatNowIcon(item)" class="normal" />
          </div>
        </div>
      </movable-view>
    </movable-area>
  </div>
</template>
<script setup lang="ts">
import { computed, toRefs, ref } from "vue";
import * as seatConfig from "./seat_config";

const props = defineProps({
  options: {
    type: Object,
    required: true,
  },
  arealist: {
    type: Array<any>,
    required: true,
  },
});
const moveX = ref(0);
const scale = ref(1);
const isShow = ref(true);
const { options, arealist } = toRefs(props);

//格式化座位
const formatColumn = computed(() => {
  return (str) => {
    let count = 1;
    return str.map((item) => (item !== "" ? count++ : ""));
  };
});
//放大缩小事件
const onScale = (e) => {
  let w = options.value.screenWidth * 0.5;
  let s = 1 - e.detail.scale;
  moveX.value = w * s;
  scale.value = e.detail.scale;
};
//移动事件
const onMove = (e) => {
  moveX.value = e.detail.x;
};

const emit = defineEmits(["onchange"]);
const clickSeat = (e, index) => {
  emit("onchange", { e, index });
};

const getAreaIndex = (id) => {
  return arealist.value.findIndex((item) => {
    // console.log(item.areaId, id);
    return item.regionName == id;
  });
};
//格式化座位
const formatNowIcon: any = computed(() => {
  return (data) => {
    // arealist.value.length > 0 && data.areaId != "0" && !data.seatType
    if (
      data.nowIcon.includes("kexuan.png") &&
      arealist.value.length > 0 &&
      !data.seatType
    ) {
      return seatConfig.area_arr[getAreaIndex(data.areaId)];
    }
    //  arealist.value.length > 0 && data.areaId != "0" && data.seatType)
    else if (
      data.nowIcon.includes("qinglukexuan") &&
      arealist.value.length > 0 &&
      data.seatType
    ) {
      if (data.seatType === "L") {
        return seatConfig.qinglv_arr[getAreaIndex(data?.areaId)]?.left;
      } else {
        return seatConfig.qinglv_arr[getAreaIndex(data?.areaId)]?.right;
      }
    } else {
      return data.nowIcon;
    }
  };
});
</script>
<style lang="scss">
.select-seat-seat-view-container {
  display: flex;
  justify-content: center;
  position: relative;
  .defaultArea {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    .movableOne {
      box-sizing: border-box;
      position: relative;
      padding: 100px 60px !important;
      color: #fff;
      overflow: hidden;
      .left-column {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 15rpx;
        overflow: hidden;
        z-index: 2;
        padding: 0 4px;
        .column-item {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16rpx;
          color: #fff;
        }
      }
    }
  }
  /*
*情侣座位的字体样式
*/
  .row-labels {
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 24px;
    top: 100rpx;
    // padding: 12px 0;
    border-radius: 10px;
    position: absolute;
    left: 10px;

    // margin-left: 30rpx;
    .row-label {
      padding-top: 10rpx;
      width: 30rpx;
      text-align: center;
      // padding: 12px;
    }
  }

  .loveSeatDemo text {
    margin-left: 10rpx;
  }

  /*
*影厅图上方显示影厅名字区域
*/

  .hallName {
    width: 80%;
    height: 2px;
    border-top: 40rpx solid #5232b7;
    border-right: 20rpx solid transparent;
    border-left: 20rpx solid transparent;
    line-height: 30rpx;
    color: white;
    position: absolute;
    top: 0;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  /*
*影厅图上方显示影厅名字区域字体样式
*/

  .hallName .txt {
    font-size: 20px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -35rpx;
    white-space: unset;
  }

  /*
*所有座位的区域
*/

  .seatArea {
    margin-left: 30px;

    font-size: 10rpx;
    position: relative;

    .alignLine {
      position: absolute;
      left: 50%;
      height: 100%;
      border-left: 1px dashed #aaa;
      transform: translateX(-100%);
    }

    .seatTap {
      position: absolute;

      .areaitem {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .txt {
          font-size: 20px;
          color: #858a99;
          opacity: 0.3;
        }
      }
    }

    .hidden-element {
      display: none;
    }

    .hidden-element.active {
      display: block;
    }
  }

  /*
*中轴线
*/

  /*
*选座区域普通座位的图片样式
*/

  .normal {
    position: relative;
    /* margin: 10rpx; */
    width: 100%;
    height: 100%;
  }

  /*
*选座区域情侣座位的图片样式
*/

  .LoveSeat {
    position: relative;
    /* margin: 10rpx 0;  */
    width: 70rpx;
    height: 70rpx;
  }

  /*
*所有座位的图片样式下方透明可点击区域
*/

  /*
*情侣座位的图片样式下方透明可点击区域
*/

  // .LoveSeatTap {
  //     position: absolute;
  //     top: 0;
  //     width: 70rpx;
  //     height: 70rpx;
  // }

  /*
* 座位图限制区域
*/

  // movable-area {
  //     overflow: hidden;
  // }

  /*
* 座位图可移动区域(座位图)
*/

  /*
* 座位图可移动区域(左边座位排号栏)
*/

  .movableTwo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 1400rpx;
    width: 30rpx;
    padding: 100rpx 0;
    color: #fff;
  }

  /*
* (左边座位排号栏整体)
*/

  .seatTool {
    width: 30rpx;
    padding: 100rpx 0;
    opacity: 0.5;
  }

  .seatToolArea {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50rpx;
  }

  /*
* (左边座位排号栏每一个块)
*/

  .seatTag {
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
  }
}
</style>
